JSX (JavaScript)
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
top
JSX (JavaScript Syntax Extension et parfois appelé JavaScript XML) est une extension React de la syntaxe du langage JavaScript cite-ref-1[1] qui permet de structurer le rendu des composants à l'aide d'une syntaxe familière à de nombreux développeurs. Il est similaire en apparence au HTML.
Contents
• Balisage
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Balisage
Un exemple de code JSX :
const App = () => {
return (
<div>
<p>En-tête</p>
<p>Contenu</p>
<p>Pied de page</p>
</div>
);
}
Éléments imbriqués
Les attributs
JSX fournit une gamme d'attributs d'élément conçus pour refléter ceux fournis par HTML. Des attributs personnalisés peuvent également être transmis au composantcite-ref-4[4]. Tous les attributs seront reçus par le composant en tant que propriétés.
Quelques attributs particuliers des composants React :
• className est une propriété définissant la classe CSS, correspondant à l'attribut HTML class mais renommé en className car class est un mot réservé en Javascript.
• style est une propriété définissant des règles de style CSS, comme en HTML mais définie obligatoirement sous forme d'un objet au lieu d'une chaîne de caractères. Les noms d'attribut correspondent aux noms des propriétés CSS en remplaçant le tiret par la mise en majuscule de la lettre qui suit. Exemple : style={{ fontWeight:'bold', fontSize:'24pt' }}
• children est une propriété contenant le tableau des éléments enfants contenus dans le composant.
Expressions JavaScript
Les expressions JavaScript (mais pas les instructions) peuvent être utilisées dans JSX avec des accolades {} :
<h1>{10+1}</h1>
L'exemple ci-dessus affichera :
<h1>11</h1>
Expressions conditionnelles
Les instructions If–else ne peuvent pas être utilisées dans JSX, mais des expressions conditionnelles peuvent être utilisées à la place. L'exemple ci-dessous affichera le résultat de l'expression { i === 1 ? 'true' : 'false' } comme la chaîne 'true' car i vaut 1.
const App = () => {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);
}
Ce qui précède affichera :
<div>
<h1>true</h1>
</div>
Les fonctions et JSX peuvent être utilisés au conditionnel :
const App = () => {
const sections = [1, 2, 3];
return (
<div>
{sections.map((n,i) => (
// 'key' est utilisé par react pour pister les items de la liste et leurs changements.
// Chaque valeur 'key' doit être unique.
<div key={"section-" + n}>
Section {n} {i === 0 && <span>(first)</span>}
</div>
))}
</div>
);
}
Ce qui précède affichera :
<div>
<div>Section 1<span>(first)</span></div>
<div>Section 2</div>
<div>Section 3</div>
</div>
Le code écrit en JSX nécessite une conversion avec un outil tel que Babel avant de pouvoir être compris par les navigateurs Webcite-ref-5[5]. Ce traitement est généralement effectué au cours d'un processus de création de logiciel avant le déploiement de l'application.
Notes et références
cite-note-11. ↑ « Draft: JSX Specification », JSX, Facebook (consulté le 7 avril 2018)
cite-note-22. ↑ clark2017Clark, « React v16.0§New render return types: fragments and strings », React Blog, 26 septembre 2017
cite-note-33. ↑ « React.Component: render », React
cite-note-44. ↑ clark2017Clark, « React v16.0§Support for custom DOM attributes », React Blog, 26 septembre 2017
Liens externes